<template>
  <div class="mine-page-2 bg-background" :style="{ overflow: 'auto' }">
    <MineFol v-if="isFol" @to-page="toPage" @back="back"></MineFol>
    <MineProfile v-else-if="isProfile" @to-page="toPage" @back="back"></MineProfile>
    <MineFanSendSet v-else-if="isFanSendSet" @to-page="toPage" @back="back"></MineFanSendSet>
    <MineEarn v-else-if="isEarn" @to-page="toPage" @back="back"></MineEarn>
    <MinePur v-else-if="isPur" @to-page="toPage" @back="back"></MinePur>
    <IncomePre v-else-if="isIncomePre" @to-page="toPage" @back="back"></IncomePre>
    <MineMedia v-else-if="isMedia" @back="back"></MineMedia>
    <MineSet v-else-if="isSet" @to-page="toPage" @back="back"></MineSet>
    <MineSupport v-else-if="isSupportOrFaq" @to-page="toPage" @to-same-page="toSamePage" @back="back"></MineSupport>
    <MineCreator v-else-if="isCreator" @to-page="toPage" @back="back"></MineCreator>
    <MineLegal v-else-if="isLegal" @to-page="toPage" @back="back"></MineLegal>
    <MineGenderVisitor v-else-if="isGenderVisitor" @to-page="toPage" @back="back"></MineGenderVisitor>
  </div>
</template>

<script setup>
import { computed, defineAsyncComponent } from 'vue'

const MineFol = defineAsyncComponent(() => import('./MineFol.vue'))
const MineProfile = defineAsyncComponent(() => import('./mineProfile/MineProfile.vue'))
const MineFanSendSet = defineAsyncComponent(() => import('./mineFanSendSet/MineFanSendSet.vue'))
const MineEarn = defineAsyncComponent(() => import('./mineEarn/MineEarn.vue'))
const MinePur = defineAsyncComponent(() => import('./minePur/MinePur.vue'))
const IncomePre = defineAsyncComponent(() => import('./incomePre/incomePre.vue'))
const MineMedia = defineAsyncComponent(() => import('./MineMedia.vue'))
const MineSet = defineAsyncComponent(() => import('./mineSet/MineSet.vue'))
const MineSupport = defineAsyncComponent(() => import('./MineSupport.vue'))
const MineCreator = defineAsyncComponent(() => import('./MineCreator.vue'))
const MineLegal = defineAsyncComponent(() => import('./mineLegal/MineLegal.vue'))
const MineGenderVisitor = defineAsyncComponent(() => import('./MineGenderVisitor.vue'))

const props = defineProps({
  name: { type: String, required: true },
})

const emits = defineEmits(['toPage'])

const isFol = computed(() => props.name === `following`)
const isProfile = computed(() => props.name === `profile`)
const isFanSendSet = computed(() => props.name === `fan-send-settings`)
const isEarn = computed(() => props.name === `earnings`)
const isPur = computed(() => props.name === `purchases`)
const isIncomePre = computed(() => props.name === 'incomePre')
const isMedia = computed(() => props.name === `media`)
const isSet = computed(() => props.name === `settings`)
const isSupportOrFaq = computed(() => props.name === `support` || props.name === `faq`) // 因為已經將信件中的 name 寫成 "support"了，所以讓"support"和"faq"都可以到達常見問題頁
const isCreator = computed(() => props.name === `creator-faq`)
const isLegal = computed(() => props.name === `legal`)
const isGenderVisitor = computed(() => props.name === `gender-visitor`)

function toPage(name, params) {
  emits('toPage', 3, name, params)
}

function toSamePage(name) {
  emits('toPage', 2, name)
}

function back() {
  emits('toPage', 1)
}
</script>

<style lang="scss" scoped>
.mine-page-2 {
  width: 100%;
  height: 100%;
}
</style>
